<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>dl列表</title>
    <style>
        /* dd是定义列表definition list的意思 */
        dl {
            margin-bottom:50px;
        }

        /* dt是标题的意思 */
        dl dt {
            color:red;
            font-weight:bold;
        }

        /* dd是描述的意思 */

        .list-item{
            display: flex;
        }
        .list-item dd{
            flex:1;
            text-align: right;
            margin: 0;
        }

    </style>
</head>

<body>

    <dl>
        <div class="list-item">
            <dt><i>姓</i>名: </dt>
            <dd><em>张</em>三</dd>
        </div>
        <div class="list-item">
            <dt>年龄 </dt>
            <dd>12</dd>
        </div>
        <div class="list-item">
            <dt>性别 </dt>
            <dd>男</dd>
        </div>
        <div class="list-item">
            <dt>职业 </dt>
            <dd>演员</dd>
        </div>

    </dl>


</body>

</html>